<template>
  <view class="memberPage">
    <view class="member-search">
      <u-search placeholder="输入搜索关键字" inputAlign="center" :showAction="false" v-model="keyword"></u-search>
    </view>
    <view class="member-nav">
      <view class="member-title">
        <view class="member-sum">成员总数：<view style="color: #FF5353;">3909</view>&nbsp; (</view>
        <view class="member-wx">
          <image src="@/static/icon/specialcolumnPage/wx.png" mode=""></image>
          公众号:<view style="color: #FF5353;">1980</view>
        </view>
        <view class="member-app">
          <image src="@/static/icon/specialcolumnPage/app.png" mode=""></image>
          APP:<view style="color: #FF5353;">2311</view>)
        </view>
      </view>
      <view class="member-list">
        <view class="list-img">
          <image src="../../../static/icon/userPage/promotion2.png" mode=""></image>
        </view>
        <view class="list-title">
          <view class="list-name">
            sugar man
            <image src="@/static/icon/specialcolumnPage/wx.png" mode=""></image>
            <image src="@/static/icon/specialcolumnPage/app.png" mode=""></image>
          </view>
          <view class="list-timer">
            2024-1-17
            <image src="@/static/icon/specialcolumnPage/dig-v.png" mode=""></image>
          </view>
        </view>
        <view class="list-set">
          <image src="@/static/icon/specialcolumnPage/set.png" mode="" @click="onPopup"></image>
        </view>
      </view>
      <Popup :show="popupShow" :list="popupList" @popupClose="onPopupClose" @popupClick="onPopupClick"></Popup>
    </view>
  </view>
</template>

<script>
  import Popup from '../components/SetPopup/Popup.vue'
  export default {
    components: {
      Popup
    },
    data() {
      return {
        keyword: '',
        popupShow: false,
        popupList: [{
          title: '设为管理员',
          type: 1
        }, {
          title: '设置折扣',
          type: 2
        }, {
          title: '加入黑名单',
          type: 3
        }, {
          title: '踢出该成员',
          type: 4
        }, {
          title: '取消',
          type: 5
        }]
      }
    },
    methods: {
      onPopupClose(e) {
        this.popupShow = e
      },
      onPopupClick(type) {
        console.log(type, 33333);
        if (type === 2) {
          uni.navigateTo({
            url: '/pages/specialColumnPage/expertPage/expert-discount'
          })
        }
        this.popupShow = false
      },
      onPopup() {
        this.popupShow = true
      },
    }
  }
</script>

<style lang="less" scoped>
  .member-search {
    width: 100%;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    box-sizing: border-box;
    padding: 30rpx;
  }

  .member-nav {
    width: 100%;
    margin-top: 20rpx;
    background-color: #fff;

    .member-title {
      height: 100rpx;
      padding-left: 20rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #909090;

      .member-sum {
        display: flex;
      }

      .member-wx {
        display: flex;

        image {
          height: 44rpx;
          width: 44rpx;
          margin-right: 10rpx;
        }
      }

      .member-app {
        display: flex;
        margin-left: 40rpx;

        image {
          height: 44rpx;
          width: 44rpx;
          margin-right: 10rpx;
        }
      }


    }

    .member-list {
      width: 100%;
      height: 126rpx;
      border-top: 2rpx solid #e8e8e8;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 30rpx;

      .list-img {
        width: 76rpx;
        height: 76rpx;
        box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
        border-radius: 10rpx;

        image {
          width: 76rpx;
          height: 76rpx;
          border-radius: 10rpx;
        }
      }

      .list-title {
        flex: 1;
        margin-left: 20rpx;

        .list-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #1C1C1C;
          display: flex;

          image {
            height: 44rpx;
            width: 44rpx;
            margin-left: 10rpx;
          }
        }

        .list-timer {
          font-size: 20rpx;
          font-weight: 500;
          color: #909090;
          display: flex;

          image {
            height: 36rpx;
            width: 78rpx;
            margin-left: 10rpx;
          }
        }
      }

      .list-set {
        height: 34rpx;
        width: 72rpx;

        image {
          height: 34rpx;
          width: 72rpx;
        }
      }
    }
  }
</style>